<%@taglib prefix="s" uri="/struts-tags" %>
<%@page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>

<head>
	<title><s:text name="menu.ore.minerals"></s:text></title>
</head>

<script type="text/javascript">
    $(
            function(){
                $("div#tabs li:first").addClass("activeTab");
                $("div#content div:not(:first)").hide();
                $("div#tabs li").click(function(e){
                    $("div#tabs li.activeTab").removeClass("activeTab");
                    $(this).addClass("activeTab");
                    $("div#content div").hide();
                    var panel = $(this).find("a:first").attr("href");
                    $("div#content " + panel).fadeIn("fast");
                    e.preventDefault();
                });
            }
    )

</script>

<style type="text/css">
    #tabs, #content{
        clear: both;
    }

    .activeTab, .inactiveTab{
        float: left;
        padding: 5px 7px 5px 7px;
        border-left: 1px solid #686872;
        border-right: 1px solid #686872;
        border-bottom: none;
    }
    
    .inactiveTab{
         cursor: pointer;
         background-color: #303040;
    }
    
    .activeTab{
        background-color: orange;
        font-weight: bold;
        color: black;
    }
    
    div#tabs li a {
        text-decoration: none;
    }
</style>

<div id="tabs">
	<ul>
		<li class="inactiveTab"><a href="#panel_0">Ore</a></li>
		<li class="inactiveTab"><a href="#panel_1">Compressed ore</a></li>
		<li class="inactiveTab">Ice</li>
		<li class="inactiveTab">Refinables</li>
	</ul>
</div>

<div id="content">
	<div id="panel_0" class="panel">
		<s:set name="marketGroupId" value=""/>
		<table class="fullWidth completelyBordered">
			<tr>
				<th colspan="2">Ore refining table</th>
				<th width="50">
					<div align="center">m3</div>
					<img src="img/Types/1242_32.png" alt="M3"/>
				</th>
				
				<s:iterator value="mineralsMap.keys" var="key">
					<th width="8%" class="${mineralsMap[key]}">
						<div align="center">${mineralsMap[key]}</div>
						<img src="img/Types/${key}_64.png" alt="${mineralsMap[key]}"/>
					</th>
				</s:iterator>
				
				<th width="50">
					<div align="center">Batch</div>
					<img src="img/Types/23_32.png" alt="BATCH"/>
				</th>
			</tr>
			
			<s:iterator value="oreMineralTable" var="ore">
				<tr>
					<s:if test="%{#marketGroupId != #ore.marketGroupId}">
						<s:set name="marketGroupId" value="#ore.marketGroupId"/>
						<td width="66px" rowspan="3" align="center">
							<img src="img/Types/${ore.id}_64.png" alt="${ore.name}"/>
						</td>
					</s:if>
					<td>${ore.name}</td>
					<td align="center">${ore.volume}</td>
					<s:iterator value="mineralsMap.keys" var="mineralID">
						<td class="${mineralsMap[mineralID]}" align="center">${ore.minerals[mineralID]}</td>
					</s:iterator>
					<td align="center">${ore.portionSize}</td>
				</tr>
			</s:iterator>
			
			<tr>
				<th colspan="2">Ore refining table</th>
				<th>
					<div align="center">m3</div>
					<img src="img/Types/1242_32.png" alt="BATCH"/>
				</th>
				<s:iterator value="mineralsMap.keys" var="key">
					<th class="${mineralsMap[key]}">
						<div align="center">${mineralsMap[key]}</div>
						<img src="img/Types/${key}_64.png" alt="${mineralsMap[key]}"/>
					</th>
				</s:iterator>
				<th>
					<div align="center">Batch</div>
					<img src="img/Types/23_32.png" alt="BATCH"/>
				</th>
			</tr>
		</table>
	</div>
	
	<div id="panel_1" class="panel">
	    <table class="fullWidth completelyBordered">
			<tr>
				<th colspan="2">Compressed ore refining table</th>
				<th width="50">
					<div align="center">m3</div>
					<img src="img/Types/1242_32.png" alt="BATCH"/>
				</th>
				
				<s:iterator value="mineralsMap.keys" var="key">
					<th width="8%" class="${mineralsMap[key]}">
						<div align="center">${mineralsMap[key]}</div>
						<img src="img/Types/${key}_64.png" alt="${mineralsMap[key]}"/>
					</th>
				</s:iterator>
				
				<th width="50"> 
					<div align="center">Batch</div>
					<img src="img/Types/23_32.png" alt="BATCH"/>
				</th>
			</tr>
			
			<s:iterator value="compressedOreMineralTable" var="compressedOre">
				<tr>
					<s:if test="%{#marketGroupId != #compressedOre.marketGroupId}">
						<s:set name="marketGroupId" value="#compressedOre.marketGroupId"/>
						<td width="66px" rowspan="3" align="center">
							<img src="img/Types/${compressedOre.id}_64.png" alt="${compressedOre.name}"/>
						</td>
					</s:if>
					<td>${compressedOre.name}</td>
					<td align="center">${compressedOre.volume}</td>
					<s:iterator value="mineralsMap.keys" var="mineralID">
						<td align="center" class="${mineralsMap[mineralID]}">${compressedOre.minerals[mineralID]}</td>
					</s:iterator>
					<td align="center">${compressedOre.portionSize}</td>
				</tr>
			</s:iterator>
			
			<tr>
				<th colspan="2">Compressed ore refining table</th>
				
				<th width="50">
					<div align="center">m3</div>
					<img src="img/Types/1242_32.png" alt="BATCH"/>
				</th>
				
				<s:iterator value="mineralsMap.keys" var="key">
					<th width="8%" class="${mineralsMap[key]}">
						<div align="center">${mineralsMap[key]}</div>
						<img src="img/Types/${key}_64.png" alt="${mineralsMap[key]}"/>
					</th>
				</s:iterator>
				
				<th width="50"> 
					<div align="center">Batch</div>
					<img src="img/Types/23_32.png" alt="BATCH"/>
				</th>
			</tr>
		</table>
	</div>
</div>
